<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas
      id="canvas"
      width="500"
      height="500"
      style="border: 1px red solid"
    ></canvas>
  </body>
</html>
<script src="./tool.js"></script>
<script src="./arrow.js"></script>
<script>
  const canvas = document.getElementById("canvas");
  const cxt = canvas.getContext("2d");

  async function main() {
    // 获取鼠标的位置
    const mouse = tools.getMouse(canvas);
    let angle = 0;
    let arrow = new Arrow(canvas.width / 2, canvas.height / 2);

    function drawFrame() {
      window.requestAnimationFrame(drawFrame);
      cxt.clearRect(0, 0, canvas.width, canvas.height);
      const dx = mouse.x - canvas.width / 2;
      const dy = mouse.y - canvas.height / 2;
      arrow.angle = Math.atan2(dy, dx);
      arrow.fill(cxt);
    }

    drawFrame()
  }

  main();
  //
</script>
